<script lang="ts" setup>

// 事件
import {computed, ref} from "vue";

const emit = defineEmits<{
  cancel: [],
  confirm: [],
  deleteTag: [Index: number]
  addTag: [tag: string]
}>()

// 接收
const props = withDefaults(defineProps<{
  tagList: string[]
}>(), {
  tagList: () => []
})

const number = ref(0) //
// 点击取消
const onCancel = () => {
  emit('cancel')
}
// 点击确认
const onConfirm = () => {
  emit('confirm')
}

/**
 * 删除标签
 * @param index 标签索引
 */
const onDeleteTag = (index: number) => {
  emit('deleteTag', index)
}
const showCustomInput = ref(false) // 控制键盘弹出添加标签
// 点击添加标签
const onCustomTag = () => {
  if (remainTagNum.value <= 0){
    return
  }
  // 唤起键盘
  showCustomInput.value = true
}

// 点击添加自定义标签的确认
const customTag = ref('')
const onConfirmAddCustomTag = () => {
  if (customTag.value === '') {
    return uni.showToast({title: '请输入标签', icon: 'none'})
  }
  // 添加标签
  emit('addTag', customTag.value)
  // 关闭键盘
  showCustomInput.value = false
  customTag.value = ''
}
const inputStyle = {
  borderColor: '#39c5bb'
}
const tagNum = ref(8)
const remainTagNum = computed(() => tagNum.value - props.tagList.length)
</script>

<template>
  <view class="tag-popup">
    <view class="tag-popup-title">
      <view style="padding-left: 50rpx" @click="onCancel">取消</view>
      <view class="tag-popup-title-text">选择动物标签</view>
      <view class="confirm" @click="onConfirm">确定</view>
    </view>
    <view class="tag-popup-content">
      <view class="tag-text" v-if="remainTagNum>0">还可以添加{{ remainTagNum }}个标签</view>
      <view class="tag-text" v-else>标签数已满，如需添加请删除其他标签</view>
      <view v-for="(item,index) in tagList" :key="item" class="tags">{{ item }}
        <uni-icons color="#ffffff" size="14" style="margin-left: 5rpx" type="closeempty"
                   @click="onDeleteTag(index)"></uni-icons>
      </view>
    </view>
    <view :class="[remainTagNum<=0?'disabled-add':'active-add']" style="border: none" class="custom-tag cuIcon-add"
          @click="onCustomTag">
      自定义标签
    </view>
    <view v-if="showCustomInput" class="custom-tag-input">
      <view class="custom-tag-input-title">
        <text @click="showCustomInput=false">取消</text>
        <text>添加自定义标签</text>
        <text @click="onConfirmAddCustomTag">确定</text>
      </view>
      <view class="padding-sm" style="width: 100%">
        <uni-easyinput v-model="customTag" :clearable="false" :focus="showCustomInput" :placeholder="'请输入标签'"
                       :styles='inputStyle'
                       :trim="true" auto-height class="radius-xl" maxlength="5">
          <template v-slot:right>
            <text style="margin-right: 10px;color: rgba(10,10,10,0.32)"> {{ customTag.length }}/5</text>
          </template>
        </uni-easyinput>
      </view>

    </view>

  </view>
</template>

<style lang="scss" scoped>
.tag-popup {
  background-color: #fff;
  width: 100%;
  height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;

  .tag-popup-title {
    display: flex;
    justify-content: space-between;
    padding: 30rpx 60rpx 30rpx 60rpx;
    font-size: 30rpx;
    background-color: #ffffff;
    width: 100%;
    border-radius: 20rpx;
    color: #333333;
    border-bottom: 3rpx solid #f1f1f1;

    .confirm {
      color: #39c5bb;
      padding-right: 50rpx;
    }
  }

  .tag-popup-content {
    display: flex;
    flex-wrap: wrap;
    padding: 40rpx 30rpx 0 30rpx;
    position: relative;
    width: 90%;

    .tag-text {
      position: absolute;
      top: 10rpx;
      left: 30rpx;
      color: #8d8d8d;
      font-size: 24rpx;

    }

    .tags {
      position: relative;
      height: 60rpx;
      min-width: 80rpx;
      background: #39c5bb;
      border-radius: 15px;
      margin: 10px 10px 10px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #ffffff;
      font-size: 14px;
      z-index: 99;
      opacity: 1;
      padding: 5px 10px;
    }
  }

  .custom-tag {
    display: flex;
    align-self: flex-start;
    margin: 20rpx 0 0 40rpx;

    padding: 10rpx;
    justify-content: center;
    align-items: center;
    width: 30%;
    height: 90rpx;
    border-radius: 20rpx;
    border: #39c5bb 3rpx solid;
    color: #39c5bb;
    font-size: 14px;
    font-family: cuIcon;
  }

  .custom-tag-input {
    position: absolute;
    width: 100%;
    height: 50vh;
    display: flex;
    //justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #fff;
    z-index: 999;
    margin-bottom: 10px;
    row-gap: 5px;

    &-title {
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 20rpx;
      font-size: 16px;
      color: #8d8d8d;
      margin-bottom: 10rpx;
      border-bottom: #EEEEEE 1px solid;

      text {
        margin: 0 20px;

        &:nth-child(2) {
          color: #333333;
        }

        &:nth-child(3) {
          color: #39c5bb;
        }
      }
    }
  }
}

.disabled-add {
  background-color: #EEEEEE !important;
  color: #8d8d8d !important;
  border: #EEEEEE 3rpx solid!important;
}
.active-add{
  border: #39c5bb 3rpx solid!important;
  color: #39c5bb!important;
}
</style>